<template>
  <div class="content-wrapper">
    <div class="content-multiple-main-wrap" v-show="!showSingle">
      <fire-health-assessment :jumpFun="jumpSingleHome" ref="fireHealthAssessment"></fire-health-assessment>
      <contact-police-supervision ref="contactPoliceSupervision"></contact-police-supervision>
      <control-room ref="controlRoom"></control-room>
      <div class="flex">
        <fire-inspection ref="fireInspection"></fire-inspection>
        <fire-damage-management ref="fireDamageManagement"></fire-damage-management>
      </div>
    </div>
    <!-- 单单位 -->
    <transition v-if="showSingle">
        <!-- <home-single :organizationId="selectOrgId" :organizationName="selectOrgName" :backHomeFun="()=>{showSingle=false}" ref="homeSingle"></home-single> -->
        <home-singlle-unit :organizationId="selectOrgId" :organizationName="selectOrgName" :backHomeFun="()=>{showSingle=false}" ref="homeSingle"></home-singlle-unit>
    </transition>
  </div>
</template>

<script>
import homeSingle from './HomeSingle'
import fireHealthAssessment from './FireHealthAssessment'
import contactPoliceSupervision from './ContactPoliceSupervision'
import controlRoom from './ControlRoom'
import fireInspection from './FireInspection'
import fireDamageManagement from './FireDamageManagement'
import homeSinglleUnit from '../homePageModel/HomeSinglleUnit'

export default {
  name: 'Index',
  components: {
    homeSingle,
    fireHealthAssessment,
    contactPoliceSupervision,
    controlRoom,
    fireInspection,
    fireDamageManagement,
    homeSinglleUnit
  },
  data () {
    return {
      selectOrgId: '',
      selectOrgName: '',
      showSingle: false,
      msg: '监管方看板'
    }
  },
  created () {
  },
  methods: {
    jumpSingleHome(orgId, orgName) {
      let that = this
        
      that.selectOrgId = orgId
      that.selectOrgName = orgName || ''
      that.showSingle = true
    },
    // 处理多单位推送消息
    dealWithMultipleWSData(type, data) {
      let that = this
      let MultioleMap = {
        '50200': 'fireHealthAssessment',
        '50210': 'contactPoliceSupervision',
        '50220': 'controlRoom',
        '50230': 'fireInspection',
        '50240': 'fireDamageManagement'
      }

      // 判断当前展示的是多单位还是单单位
      if(that.showSingle) {
        // 判断type是否属于单单位 && orgCode跟当前展示单位code一致
        if(String(type).slice(0, 3) === '501' && that.selectOrgId == data.orgId) {
          // 调用单单位首页处理推送消息方法
          that.$refs['homeSingle'].dealWithSingleWSData(type, data)
        }
      }
      // 判断type是否属于多单位
      if(String(type).slice(0, 3) === '502') {
        // 更新/刷新对应模块
        if(that.$refs[MultioleMap[type]]) that.$refs[MultioleMap[type]].refreshModel(data)
      }
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style >
.content-wrapper {
    /* margin: 0 auto; */
    display: flex;
    flex-direction: column;
    /* width: 1200px; */
}
.content-wrapper .content-multiple-main-wrap {
  margin: 0 auto;
  width: 1200px;
}
.content-wrapper .no-data {
  display: block;
  position: relative;
  padding: 0;
  padding-top: 50px;
  background: url(../../../assets/images/home/empty.png) center center no-repeat;
  background-size: 280px 280px;
}
.content-wrapper .no-data .no-data-text {
  position: absolute;
  top: 50%;
  margin-top: 80px;
  width: 100%;
  color: #333;
  text-align: center;
  font-size: 18px;
  line-height: 30px;
  opacity: 0.6;
}
.red {
    color: #D84553;
}
.blue {
    color: #205FA9;
}
.yellow {
    color: #DFAA3A;
}
.black {
    color: #000;
}
.flex {
    display: flex;
}

.content-item {
    margin: 0 auto;
    margin-bottom: 40px;
    width: 1200px;
}

.content-item .content-item-title {
    border-left: 7px solid #205FA9;
    padding-left: 10px;
    height: 30px;
    font-size: 22px;
    line-height: 30px;
    color: #205FA9;
}

.content-item .content-item-wrap {
    margin: 0 auto;
    padding: 20px 0;
    width: 1200px;
}
</style>
